import React, { useState } from 'react'
import { NavBar, Button, Popup, Tag } from 'antd-mobile'
import { Collapse } from 'antd-mobile'
import { useNavigate, useLocation } from 'react-router-dom'
import styles from './detail.module.css'
import { TextArea } from 'antd-mobile'
import { Steps } from 'react-vant';

function Index() {
  const navigate = useNavigate()
  const { state } = useLocation()
  // console.log(state)

  // 文本域
  const [value, setValue] = useState('')
  // 弹框
  const [visible7, setVisible7] = useState(false)

  // 发送评论
  const handleSend = () => {
    setValue('')
  }

  // 去订单 -- 购买
  const handleToOrder = () =>{
    navigate(`/order`, { state: state })
  }
  return (
    <div>
      <NavBar onBack={() => { navigate(-1) }}>车次列表</NavBar>
      <div style={{ display: 'flex', justifyContent: 'space-around' }}>
        <Button size='small' color='success'>
          前一天
        </Button>
        <Button size='small' color='warning'>
          2025-06-17
        </Button>
        <Button size='small' color='success'>
          后一天
        </Button>
      </div>
      {/* 列表大盒子 */}
      <div>
        <div className={styles.box}>
          {/* 上 */}
          <div className={styles.top}>
            {/* 左边 */}
            <div className={styles.left}>
              {/* 1 */}
              <div>
                <p>{state.dst}</p>
                <p>{state.dasn} {state.dat}</p>
              </div>
              {/* ---- */}
              <div>-----→</div>
              {/* 2 */}
              <div>
                <p>{state.ast}</p>
                <p>{state.aasn} {state.aat}</p>

              </div>
            </div>
            {/* 右边 */}
            <div className={styles.right}>￥{state.lps[0].atp}</div>
          </div>
          {/* 下 */}
          <div className={styles.foot}>
            <span>{state.ss[0].asn}</span> || {''}
            <span>{state.ss[0].amn}</span>
            {/* 时刻 */}
            <span style={{ marginLeft: '20%' }} onClick={() => setVisible7(true)}>G101 时刻表</span>
          </div>

          <p style={{ display: 'flex', justifyContent: 'space-around' }}>
            <span>二等座 有票</span>
            <span>一等座 有票</span>
            <span>特等座 18票</span>
          </p>
        </div>
      </div>
      {/* 手风琴 */}
      <Collapse accordion arrowIcon={(active) => active ? <Tag color='warning'>订</Tag> : <Tag color='warning'>订</Tag>}>
        <Collapse.Panel key='1' title='￥333' >
          限时已补￥5  <Tag 
          style={{marginLeft:'73%'}} 
          color='success'
          onClick={()=>handleToOrder()}
          >买</Tag>
        </Collapse.Panel>
        <Collapse.Panel key='2' title='￥333'>
          限时已补￥10 <Tag style={{marginLeft:'70%'}} color='success' onClick={()=>handleToOrder()}>买</Tag>
        </Collapse.Panel>
        <Collapse.Panel key='3' title='￥333'>
          限时已补￥20 <Tag style={{marginLeft:'70%'}} color='success' onClick={()=>handleToOrder()}>买</Tag>
        </Collapse.Panel>
      </Collapse>
      {/* 评论 */}
      <div>
        <TextArea
          placeholder='请输入内容'
          value={value}
          onChange={val => {
            setValue(val)
          }}
        />
        <Button block size='small' color='primary' onClick={(val) => handleSend(val)}>
          发送
        </Button>
        <p>{value}</p>
      </div>

      {/* 弹框 */}
      <Popup
        visible={visible7}
        showCloseButton
        onClose={() => {
          setVisible7(false)
        }}
      >
        {/* 步骤条 */}
        <Steps direction="vertical" active={0}>
          <Steps.Item>
            <h3>车站名称 到达时间 出发</h3>
            <p>2025-07-12 12:40</p>
          </Steps.Item>
          <Steps.Item>
            <h3>北京南</h3>
            <p>2025-06-17 12:40</p>
          </Steps.Item>
          <Steps.Item>
            <h3>天津南</h3>
            <p>2025-06-17 10:00</p>
          </Steps.Item>
          <Steps.Item>
            <h3>德州东</h3>
            <p>2025-06-17 09:30</p>
          </Steps.Item>
          <Steps.Item>
            <h3>济南西</h3>
            <p>2025-06-17 08:30</p>
          </Steps.Item>
          <Steps.Item>
            <h3>徐州东</h3>
            <p>2025-06-17 07:15</p>
          </Steps.Item>
          <Steps.Item>
            <h3>南京南</h3>
            <p>2025-06-17 6:44</p>
          </Steps.Item>
          <Steps.Item>
            <h3>无锡东</h3>
            <p>2025-06-17 5:31</p>
          </Steps.Item>
          {/* <Steps.Item>
            <h3>苏州北</h3>
            <p>2025-06-16 3:43</p>
          </Steps.Item> */}
        </Steps>
      </Popup>
    </div>
  )
}

export default Index
